<template>
  <div id="ldBz">
    <div class="center-board-title">
      各地区事业编制比对分析
      <el-select v-model="hyfl" ref="hyflRef">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="target" ref="targetRef" style="width: 225px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div id="echartsLdBz" />
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      list: [],
      options: [
        {
          value: 'A1',
          label: '行政区域面积（平方公里）'
        },
        {
          value: 'A2',
          label: '常住人口（万人）'
        },
        {
          value: 'A3',
          label: '地区生产总值（亿元）'
        },
        {
          value: 'A4',
          label: '一般公共预算收入（亿元）'
        }
      ],
      options2: [
        {
          value: '010000',
          label: '教育事业单位'
        },
        {
          value: '020000',
          label: '科学研究事业单位'
        },
        {
          value: '030000',
          label: '勘察设计事业单位'
        },
        {
          value: '040000',
          label: '勘探事业单位'
        },
        {
          value: '050000',
          label: '文化事业单位'
        },
        {
          value: '060000',
          label: '新闻出版事业单位'
        },
        {
          value: '070000',
          label: '广播影视事业单位'
        },
        {
          value: '080000',
          label: '卫生事业单位'
        },
        {
          value: '090000',
          label: '体育事业单位'
        },
        {
          value: '100000',
          label: '农林牧水事业单位'
        },
        {
          value: '110000',
          label: '交通事业单位'
        },
        {
          value: '120000',
          label: '气象事业单位'
        },
        {
          value: '130000',
          label: '地震事业单位'
        },
        {
          value: '140000',
          label: '海洋事业单位'
        },
        {
          value: '150000',
          label: '环境保护事业单位'
        },
        {
          value: '160000',
          label: '测绘事业单位'
        },
        {
          value: '170000',
          label: '信息咨询事业单位'
        },
        {
          value: '180000',
          label: '标准计量、技术监督、质量检测事业单位'
        },
        {
          value: '190000',
          label: '知识产权事业单位'
        },
        {
          value: '200000',
          label: '物资仓储、供销事业单位'
        },
        {
          value: '210000',
          label: '房地产服务、城市公用事业单位'
        },
        {
          value: '220000',
          label: '社会福利事业单位'
        },
        {
          value: '230000',
          label: '经济监督事务事业单位'
        },
        {
          value: '240000',
          label: '机关后勤服务事业单位'
        },
        {
          value: '250000',
          label: '其它事业单位'
        }
      ],
      target: 'A1',
      hyfl: '010000'
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    },
    target(newValue, oldValue) {
      this.initData()
    },
    hyfl(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.bdfx.getHyflSybzCompare({
          dep_code: this.depCode,
          hyfl: this.hyfl,
          target: this.target
        })
        console.log(res)
        //赋值给变量
        var deps = []
        var targets = []
        var bzs = []
        for (var i = 0; i < res.length; i++) {
          var item = res[i]
          deps.push(item.DEP_NAME)
          targets.push(item.TARGET)
          bzs.push(item.BZS)
        }

        var targetName = this.$refs.targetRef.selected.label
        var hyflName = this.$refs.hyflRef.selected.label
        var option = {
          grid: {
            top: '75',
            left: '5%',
            right: '5%',
            bottom: '10',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            right: '5%',
            top: '25px',
            textStyle: {
              fontSize: 14, // 字体大小
              color: '#ffffff'
            },
            data: [targetName, hyflName + '编制']
          },
          xAxis: [
            {
              type: 'category',
              axisPointer: {
                type: 'shadow'
              },
              axisTick: { show: false },
              axisLabel: {
                show: true,
                rotate: 30,
                textStyle: {
                  fontSize: 13, // 字体大小
                  color: '#f0f0f0'
                }
              },
              data: deps
            }
          ],
          yAxis: [
            {
              type: 'value',
              show: false,
              name: targetName,
              nameTextStyle: {
                fontSize: 14, // 字体大小
                color: '#ffffff'
              },
              splitLine: { show: false },
              axisLabel: { show: false }
            },
            {
              type: 'value',
              show: false,
              name: hyflName + '编制',
              nameTextStyle: {
                fontSize: 14, // 字体大小
                color: '#ffffff'
              },
              axisLabel: { show: false }
            }
          ],
          series: [
            {
              name: targetName,
              type: 'bar',
              barWidth: '40%',
              yAxisIndex: 0,
              data: targets,
              itemStyle: {
                normal: {
                  barBorderRadius: 10,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#09bcb7'
                    },
                    {
                      offset: 1,
                      color: '#8bd46e'
                    }
                  ]),
                  label: {
                    show: false, // 开启显示
                    position: 'top', // 在上方显示
                    textStyle: {
                      // 数值样式
                      color: '#ffffff',
                      fontSize: 13
                    }
                  }
                }
              }
            },
            {
              name: hyflName + '编制',
              type: 'line',
              yAxisIndex: 1,
              data: bzs,
              itemStyle: {
                normal: {
                  color: 'orange' // 折线颜色
                }
              },
              label: {
                show: true, // 开启显示
                position: 'top', // 在上方显示
                textStyle: {
                  // 数值样式
                  color: '#ffffff',
                  fontSize: 13
                }
              }
            }
          ]
        }

        this.myEchart = this.$echarts.init(
          document.getElementById('echartsLdBz')
        )
        this.myEchart.setOption(option)
        window.addEventListener('resize', () => this.myEchart.resize(), false)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss">
#ldBz {
  width: calc(50% - 15px);
  height: 100%;
  margin-right: 15px;
  background-color: rgba(1, 35, 102, 0.8);
  //background-color: #012366;
  border-radius: 20px;

  .center-board-title {
    border-bottom: #336699 1px solid;
    height: 50px;
    line-height: 50px;
    text-align: left;
    padding-left: 20px;
    font-weight: bold;
    font-size: 18px;

    .el-select {
      width: 160px;
      float: right;
      margin-right: 30px;
      .el-input--suffix {
        > input {
          background-color: #133596;
          color: #83a8f4;
          border: 1px solid #83a8f4;
          border-radius: 16px;
          height: 32px;
        }
        .el-select__caret {
          font-size: 14px;
        }
        .el-input__icon {
          line-height: 32px;
        }
      }
    }
  }
}
#echartsLdBz {
  width: 100%;
  height: calc(100% - 50px);
}
</style>
